<template>
  <view class="uni-steps" style="padding-top: 76rpx;">
    <view class="uni-steps__column">
      <view class="uni-steps__column-container">
        <view class="uni-steps__column-line-item" v-for="(item,index) in options"
              :key="index" @click="toStep(item)">
          <!--<view class="uni-steps__column-line, uni-steps__column-line&#45;&#45;before" v-if="index !== 0"-->
                <!--:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view>-->
          <view :class="[index<=active?'circle_activeColor':'circle_deactiveColor']" :style="{margin:index===0?'0rpx 28rpx 13rpx 28rpx':'13rpx 28rpx'}">
            {{index + 1}}
          </view>
          <view class="uni-steps__column-line"
                :style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
        </view>
      </view>
      <view class="uni-steps__column-text-container">
        <view v-for="(item,index) in options" :key="index" class="uni-steps__column-text">
          <text class="uni-steps__column-title" :style="{marginTop:index!==0?'122rpx':''}">{{item.title}}</text>
          <text class="uni-steps__column-desc">{{item.descAndTime}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    activeColor: {
      // 激活状态颜色
      type: String,
      default: '#EE751E'
    },
    deactiveColor: {
      // 未激活状态颜色
      type: String,
      default: '#999999'
    },
    active: {
      // 当前步骤
      type: Number,
      default: 0
    },
    options: {
      type: Array,
      default () {
        return []
      }
    } // 数据
  },
  methods: {
    toStep (item) {
      this.$emit('selectStep', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.uni-steps {
  /* #ifndef APP-NVUE */
  display: flex;
  width: 100%;
  /* #endif */
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 18rpx;
}

.uni-steps__column {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

.uni-steps__column-text-container {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  flex: 1;
}

.uni-steps__column-text {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}

.uni-steps__column-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333333;
  height: 25rpx;
  line-height: 25rpx;
}

.uni-steps__column-desc {
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
  margin-top: 22rpx;
  height: 18rpx;
  line-height: 18rpx;
}

.uni-steps__column-container {
  /* #ifndef APP-NVUE */
  display: inline-flex;
  /* #endif */
  flex-direction: column;
}

.uni-steps__column-line-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.uni-steps__column-line {
  width: 1rpx;
  background-color: #999999;
  height: 128rpx;
}

.uni-steps__column-line--after {
  flex: 1;
  transform: translate(0px, 1px);
}

.uni-steps__column-line--before {
  height: 63rpx;
  transform: translate(0px, -1px);
}

.uni-steps__column-check {
  height: 28rpx;
  line-height: 28rpx;
  margin: 4rpx 0rpx;
}
.circle_activeColor {
  width: 35rpx;
  height: 35rpx;
  border: 1px solid #EE751E;
  border-radius: 50%;
  font-size: 25rpx;
  font-weight: bold;
  color: #EE751E;
  text-align: center;
  line-height: 30rpx;
}
.circle_deactiveColor {
  width: 35rpx;
  height: 35rpx;
  border: 1px solid #999999;
  border-radius: 50%;
  margin: 14rpx 28rpx;
  font-size: 25rpx;
  font-weight: bold;
  color: #999999;
  text-align: center;
  line-height: 30rpx;
}
</style>
